<template>
	<view class="content">
		<!--顶部标签-->
		<view class="content_1">
			<scroll-view scroll-x class="tab_view">
				<block v-for="(item_tab, index) in tabList" :key='index'>
					<view class="tab_box" @click="chooseTab(index)">
						<view class="tab_name">{{item_tab.tabname}}</view>
						<view class="tab_line" v-if="tabstate == index"></view>
					</view>
				</block>
			</scroll-view>
		</view>
		<!--订单内容-->
		<view class="content_2">
			<block v-for="(data, index) in houseList" :key='index'>
				<!--全部订单-->
				<view class="house_view" v-if="tabstate == '0'">
					<image class="house_img" :src="data.house_image"></image>
					<view class="house_detail">
						<view class="house_name">{{data.house_name}}</view>
						<view class="house_info">{{data.house_type}}·{{data.house_direction}}·{{data.house_area}}·{{data.house_floor}}</view>
						<view class="house_info">{{data.house_name}}</view>
						<!-- <view class="house_tips">
							<view class="tips">{{house.house_tips1}}</view>
							<view class="tips">{{house.house_tips2}}</view>
						</view> -->
						<view class="house_money">¥ {{data.renthouse_money}} </view>
					</view>
				</view>
				<view class="btn_view" v-if="tabstate == '0'">
					<view class="btn_2" style="background-color: #63D0D5;" v-if="data.status == 1">待支付</view>
					<view class="btn_2" style="background-color: #999999;" v-if="data.status == 2">已支付</view>
					<view class="btn_2" style="background-color: #999999;" v-if="data.status == 3">拒绝入住</view>
					<view class="btn_2" style="background-color: #999999;" v-if="data.status == 4">退款成功</view>
					<view class="btn_2" style="background-color: #999999;" v-if="data.status == 5">待续租</view>
					<view class="btn_2" style="background-color: #999999;" v-if="data.status == 6">退款处理中</view>
					<view class="btn_2" style="background-color: #999999;" v-if="data.status == 7">拒绝退租</view>
					<view class="btn_2" style="background-color: #999999;" v-if="data.status == 8">待账单</view>
					<view class="btn_2" style="background-color: #999999;" v-if="data.status == 9">已入住</view>
					<view class="btn_2" style="background-color: #999999;" v-if="data.status == 10">同意退租</view>
					<view class="btn_2" style="background-color: #999999;" v-if="data.status == 11">订单状态有误</view>
				</view>
				
				<!-- 商品订单 -->
				<view class="house_view" v-if="tabstate == '1'">
					<image class="house_img" :src="data.goods_cover_image"></image>
					<view class="house_detail">
						<view class="house_name">{{data.goods_name}}</view>
						<view class="house_info" v-if="data.goods_type == 1">直接购买</view>
						<view class="house_info" v-if="data.goods_type == 2">租用商品</view>
						<view class="house_info">{{data.house_name}}</view>
						<view class="house_money">¥ {{data.order_price}} </view>
					</view>
				</view>
				<view class="btn_view" v-if="tabstate == '1'">
					<view class="btn_2" style="background-color: #63D0D5;" v-if="data.status!=1" >{{data.msg}}</view>
					<view class="btn_2" style="background-color: #63D0D5;" @click="jumpPay(data.id)" v-else >{{data.msg}}</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	//导入接口请求文件
	import {
		Request
	} from '../../../utils/request.js';
	//定义getApp对象
	const app = getApp();
	let page = 10
	let seach_number = 10
	export default {
		data() {
			return {
				tabstate: '0',
				houseList: [],
				listData: '',
				//顶部标签
				tabList: [
					{
						tabname: '租 房',
						'url':'customer/orderlist/Get_Customer_Order_List/GetOrderList',
						'list': 'houseList',	//变量容器
					},
					{
						tabname: '商 品',
						'url': 'customer/orderlist/Get_Customer_Order_Goods_List/GetList',
						'list': 'houseList',	//变量容器
					}
				]
			}
		},
		methods: {
			//切换tab标签
			chooseTab: function(id) {
				this.tabstate = id;
				new Request(this.tabList[id]['url']).request(
					() => {
						return 'POST'
					},
					() => {
						return {
							openid: app.globalData.openid,
							userid: app.globalData.userid,
							seach_number: seach_number,
							page: 0
						}
					},
					(res) => {
						
						if (res.data.code == 0) {
							new Request().showToast(res.data.msg);
							return;
						} 
						if (res.data.code == 1) {
							this.houseList = res.data.data;
						}
					}
				)
			},
			//上拉加载
			loadMore: function() {
				if (page > this.houseList.length) {
					uni.showToast({
						title: '没有更多数据了',
						icon: 'none',
						position: 'center'
					})
				} else {
					new Request('order/Get_User_Order/GetCustomerOrderList').request(
						() => {
							return 'POST'
						},
						() => {
							return {
								openid: app.globalData.openid,
								userid: app.globalData.userid,
								seach_number: seach_number,
								page: page,
							}
						},
						(res) => {
							if (res.data.code == 0) {
								uni.showToast({
									title: '没有更多数据了',
									position: 'center',
									icon: 'none'
								})
							} else {
								page += seach_number
								this.houseList = this.houseList.concat(res.data.data)
								getApp().globalData.houseList = res.data.data
								console.log(this.houseList)
							}
						}
					)
				}
				console.log(page)
			},
			jumpPay: function(order_id) {
				uni.navigateTo({
				    url: '/pages/shop/detail/pay/pay?orderid=' + order_id,
				});
			}
		},
		//上拉加载,调用loadMore
		onReachBottom() {
			var that = this
			setTimeout(function() {
				that.loadMore()
			}, 300);
		},
		onLoad() {
			page = 10
			seach_number = 10
			//加载租客我的订单
			new Request('customer/orderlist/Get_Customer_Order_List/GetOrderList').request(
				() => {
					return 'POST'
				},
				() => {
					return {
						openid: app.globalData.openid,
						seach_number: seach_number,
						page: 0
					}
				},
				(res) => {
					if (res.data.code == 0) {
						new Request().showToast(res.data.msg);
						this.houseList = [];
					} else if (res.data.code == 1) {
						this.houseList = res.data.data
					}
				}
			)
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}

	/*
		顶部标签样式
	*/
	.content_1 {
		margin-top: 40upx;
		padding-left: 40upx;
	}

	.tab_view {
		height: 52upx;
		display: flex;
		align-items: center;
		white-space: nowrap;
	}

	.tab_box {
		height: 50upx;
		margin-right: 50upx;
		display: inline-block;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}

	.tab_name {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #333333;
		font-weight: bold;
	}

	.tab_line {
		position: absolute;
		height: 50upx;
		width: 30upx;
		left: 34%;
		bottom: 0upx;
		box-sizing: border-box;
		border-bottom: 8upx solid #5EC7CB;
	}

	/*
		房源详细样式
	*/
	.content_2 {
		margin-top: 40upx;
		padding-bottom: 150upx;
	}

	.house_view {
		height: 246upx;
		background-color: #FFFFFF;
		border-radius: 15upx;
		padding: 27upx 24upx;
		display: flex;
		align-items: center;
	}

	.house_img {
		width: 304upx;
		height: 246upx;
		background-color: #8E83C7;
		margin-right: 24upx;
	}

	.house_detail {
		height: 258upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.house_name {
		height: 43upx;
		line-height: 43upx;
		font-size: 32upx;
		color: #333333;
	}

	.house_info {
		height: 35upx;
		line-height: 35upx;
		font-size: 26upx;
		color: #999999;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.house_tips {
		height: 30upx;
		display: flex;
	}

	.tips {
		height: 30upx;
		line-height: 30upx;
		color: #FFFFFF;
		font-size: 20upx;
		background-image: linear-gradient(to right, #87ECC6, #8ED5EE); //颜色渐变效果(从左到右)
		margin-right: 16upx;
		padding: 0upx 20upx;
	}

	.house_money {
		height: 46upx;
		line-height: 46upx;
		font-size: 34upx;
		color: #FFC26D;
	}

	.btn_view {
		height: 72upx;
		padding-bottom: 30upx;
		padding-top: 10upx;
		position: relative;
		background-color: #FFFFFF;
		margin-bottom: 40upx;
	}

	.btn_2 {
		width: 184upx;
		height: 72upx;
		position: absolute;
		top: 0upx;
		right: 30upx;
		border-radius: 10upx;
		text-align: center;
		line-height: 72upx;
		color: #FFFFFF;
		font-size: 28upx;
	}
</style>
